<template>
	<view class="container">
		<view v-if="list?.length">
			<view class="total">全部({{list.length}})</view>
			<view class="card" v-for="item in list" :key="item.id">
				<view class="card_title">{{item.shopName}}</view>
				<view class="card_content">
					<image class="card_image" :src="BASE_OSS_URL + item.image" mode=""></image>
					<view class="card_right">
						<view class="card_sub_title">{{item.name}}</view>
						<view class="card_sub_info">
							<view class="card_sub_price">
								¥{{item.price}}
								<text v-if="item.mark_price">¥{{item.mark_price}}</text>
							</view>
							<view class="card_btn" @click="operateCollection({'goodsId':item.id})">取消收藏</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="no_data">
			<image src="@/static/collect/no_collect.png" />
		</view>
	</view>
</template>

<script setup>
	import {
		onShow
	} from "@dcloudio/uni-app"
	import {
		ref
	} from "vue";
	import {
		collectionList,
		collection
	} from "@/service"
	import { BASE_OSS_URL } from "@/utils/request";
	
	const list = ref([])
	const getCollectionList = async () => {
		list.value = await collectionList()
	}
	const operateCollection = async (data) => {
		await collection(data)
		getCollectionList()
	}
	onShow(() => {
		getCollectionList()
	})
</script>

<style lang="scss" scoped>
	.container {
		background: $body-bc;
		min-height: 100vh;
		padding: 24rpx;

		.no_data {
			margin-top: 380rpx;
			display: flex;
			justify-content: center;

			image {
				width: 118rpx;
				height: 180rpx;
			}
		}

		.total {
			color: $title-color;
			font-size: 30rpx;
			margin-bottom: 36rpx;
		}

		.card {
			padding: 34rpx 30rpx;
			background-color: #112959;
			border-radius: 15rpx;

			.card_image {
				width: 150rpx;
				height: 150rpx;
			}

			.card_title {
				color: $title-color;
				font-weight: 500;
				font-size: 28rpx;
				margin-bottom: 30rpx;
			}

			.card_content {
				display: flex;

				.card_right {
					flex: 1;
					margin-left: 24rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					padding-bottom: 10rpx;

					.card_sub_title {
						width: 380rpx;
						color: $content-color;
						font-size: 26rpx;
					}

					.card_sub_info {
						display: flex;
						justify-content: space-between;
						align-items: center;

						.card_sub_price {
							color: #FF4F00;
							font-size: 30rpx;

							text {
								font-size: 22rpx;
								color: $content-color;
							}
						}

						.card_btn {
							color: $title-color;
							font-size: 26rpx;
						}
					}


				}
			}
		}
	}
</style>